<template>
  <div class="contend guideContend">
    <div class="container">
      <div class="topTitleTab">
        <span>当前位置：首页 > 指南 > {{ details.title }}</span>
      </div>
      <div class="contendBox">
        <div class="contendLeft">
          <!-- 详情 -->
          <div class="details">
            <div class="guideTop">
              <span class="titleColor">{{ details.title }}</span>
              <div class="tips">
                <span class="text">万骏驾考 </span>
                <span class="text">来源：万骏驾考</span>
                <span class="text"
                  ><span class="el-icon-view"></span
                  ><span class="num">{{ details.hits }}</span></span
                >
                <span class="text">{{ details.update_time }}</span>
              </div>
            </div>
            <div v-html="details.content" class="htmlCon"></div>
          </div>
        </div>
        <div class="contendRight">
          <div class="cardBox">
            <div class="title">
              <span>热门文章</span>
            </div>
            <ul class="listBox">
              <li v-for="(hotItem, i) in articleHotList" :key="i">
                <span :class="hotItem.active ? 'addColor yuan' : 'yuan'"></span>
                   <nuxt-link :to="{name:'guide-guideDetails-id',query: { articleId: hotItem.id }} ">
                <span class="text curp">{{
                  hotItem.title
                }}</span>
                </nuxt-link> 
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { articleDetail, articleHot } from "~/api/commen";
export default {
  components: {},
  data() {
    return {

    };
  },

  async asyncData({ app, query, params }) {
    let articleId = query.articleId;
    let details = await articleDetail({ id: articleId});
    let articleHotList = await articleHot();
    articleHotList.forEach((e) => {
      if (e.id == articleId) e.active = true;
    });
    return {
      details: details,
      articleHotList: articleHotList,
    };
  },
 watchQuery: ['articleId'],
  methods: {
    //热门
    async getHotarticle(articleId) {
      let details = await articleDetail({ id: articleId });
      this.details = details;
    },

  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/guideDetails.scss";

::v-deep {
  .el-pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>